<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>爱笔记</title>
	<%@include file="/include/header.jsp" %>
	
	<script type="text/javascript" src="${_CTX_PATH_ }/javascript/md5-min.js"></script>
	<script type="text/javascript" src="${_CTX_PATH_ }/javascript/setting.js"></script>
</head>

<body id="lovenote">
	<!-- Top menu begin -->
	<%@include file="/include/menu.jsp" %>
	<!-- Top menu End -->
	
	<%@include file="/include/sidebar.jsp" %>
	
	<div class="main container">
		<div class="ui grid">
			<!-- start content -->
			<div class="eleven wide column">
				<div class="ui segment form" id="profile">
					<div class="ui top attached label">修改个人资料</div>
					
					<!-- Username begin -->
					<div class="field">
						<label for="">用户名</label>
						<div class="ui left labeled icon input">
							<input type="text" name="username" placeholder="用户名" disabled="disabled" value="${user.username }">
							<i class="user icon"></i>
							<div class="ui corner label"><i class="icon asterisk"></i></div>
						</div>
					</div>
					<!-- Username end -->

					<!-- Email begin -->
					<div class="field">
						<label for="">邮箱</label>
						<div class="ui left labeled icon input">
							<input type="text" name="email" placeholder="邮箱" value="${user.email }">
							<i class="mail icon"></i>
							<div class="ui corner label"><i class="icon asterisk"></i></div>
						</div>
					</div>
					<!-- Email end -->

					<!-- Signature start -->
					<div class="field">
						<label for="">签名</label>
						<div class="ui left labeled icon input">
							<input type="text" name="signature" placeholder="签名" value="${user.signature }">
							<i class="signal icon"></i>
						</div>
					</div>
					<!-- Signature end -->
					
					<!-- Realname start -->
					<div class="field">
						<label for="">真实姓名</label>
						<div class="ui left labeled icon input">
							<input type="text" name="realname" placeholder="真实姓名" value="${profile.realname }">
							<i class="icon bullseye"></i>
						</div>
					</div>
					<!-- Realname end -->

					<!-- Gender begin -->
					<div class="grouped inline fields">
						<label for="">性别</label>
						<div class="field">
							<div class="ui radio checkbox">
								<input type="radio" name="gender" value="0" ${(profile.gender == 0) ? 'checked' : '' }>
								<label>保密</label>
							</div>
						</div>
						<div class="field">
							<div class="ui radio checkbox">
								<input type="radio" name="gender" value="1" ${(profile.gender == 1) ? 'checked' : '' }>
								<label>男</label>
							</div>
						</div>
						<div class="field">
							<div class="ui radio checkbox">
								<input type="radio" name="gender" value="2" ${(profile.gender == 2) ? 'checked' : '' }>
								<label>女</label>
							</div>
						</div>
					</div>
					<!-- Gender end -->
					
					<!-- Mobile begin -->
					<div class="field">
						<label for="">手机号码</label>
						<div class="ui left labeled icon input">
							<input type="text" name="mobile" placeholder="手机号码" value="${profile.mobile }">
							<i class="icon mobile"></i>
						</div>
					</div>
					<!-- Mobile end -->
					
					<!-- Age begin -->
					<div class="field">
						<label for="">年龄</label>
						<div class="ui left labeled icon input">
							<input type="text" name="age" placeholder="年龄" value="${profile.age }">
							<i class="icon calendar"></i>
						</div>
					</div>
					<!-- Age end -->

					<div class="ui green submit button">保存设置</div>	
					<div class="ui error message"></div>	
				</div>
				
				<div class="ui segment">
					<div class="ui label top attached">头像</div>
					<div>
						<form id="avatar" action="${_CTX_PATH_ }/setting/avatar" enctype="multipart/form-data" method="post" target="hidden_frame">
							<div class="ui grid two column divided aligned middle center">
								<div class="column">
									<label for="file" class="ui icon button">
								        <i class="photo icon"></i>
								        选择图片头像</label>
								    <input type="file" id="file" name="file" style="display:none">
								</div>
	
								<div class="column">
									当前头像
									<div class="ui images">
										<img class="rounded small image ui current_avatar" src="${sessionScope.avatar }">
									</div>
								</div>
							</div>
							
							<iframe name="hidden_frame" id="hidden_frame" style="display:none"></iframe>
						</form>
					</div>
				</div>

				<div class="ui segment form" id="password">
					<div class="ui label top attached">密码修改</div>

					<!-- Current password begin -->
					<div class="field">
						<label for="">当前密码</label>
						<div class="ui left labeled icon input">
							<input type="password" name="currentPassword" placeholder="当前密码">
							<i class="lock icon"></i>
							<div class="ui corner label"><i class="icon asterisk"></i></div>
						</div>
					</div>
					<!-- Current password end -->

					<!-- New password begin -->
					<div class="field">
						<label for="">新密码</label>
						<div class="ui left labeled icon input">
							<input type="password" name="newPassword" placeholder="新密码">
							<i class="lock icon"></i>
							<div class="ui corner label"><i class="icon asterisk"></i></div>
						</div>
					</div>
					<!-- New password end -->

					<!-- Confirm new password begin -->
					<div class="field">
						<label for="">新密码确认</label>
						<div class="ui left labeled icon input">
							<input type="password" name="confirmPassword" placeholder="新密码确认">
							<i class="lock icon"></i>
							<div class="ui corner label"><i class="icon asterisk"></i></div>
						</div>
					</div>
					<!-- Confirm new password end -->
	
					<div class="ui green submit button">更改密码</div>
					<div class="ui error message"></div>
				</div>
			</div>
			<!-- end content -->
	
			<div class="five wide column">
				
				<!-- User information begin -->
				<%@include file="/include/user_info.jsp"%>
				<!-- User information end -->

				<!-- Newest note begin -->
				<%@include file="/include/new_note.jsp" %>
				<!-- Newest note end -->
			</div>
		</div>
		
		<%@include file="/include/footer.jsp" %>
	</div>
</body>
</html>